import React, {Component} from 'react';
import {
    AppRegistry,
    Image,
    StyleSheet,
} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

const Stack = createNativeStackNavigator()

//展示的页面

import MineScene from './js/MineScene';
import LoginView from './js/LoginView';
import MenuScene from './js/MenuScene'
import Global from './js/component/Global';
import StorageTools from './js/component/StorageTools';
import Colors from './style/colors';
import MeterBooksSideMenu from './js/MeterBooksSideMenu';
import MeterBooksScene from './js/MeterBooksScene';
import Entry from './js/Entry';
import CustInfoScene from './js/CustInfoScene';
import CustInfoOrderScene from './js/CustInfoOrderScene';
import CustInfoOrder from './js/CustInfoOrder';
import StatisticsScene from './js/statistics/StatisticsScene';
import NoReadScene from './js/statistics/NoReadScene';
import HasReadScene from './js/statistics/HasReadScene';
import PaidScene from './js/statistics/PaidScene';
import ArrearsScene from './js/statistics/ArrearsScene';
import SysConfig from './js/menu/SysConfig';
import {HeaderBackButton} from '@react-navigation/elements';
import BackImage from './js/component/BackImage';
import CustInfoEditScene from './js/CustInfoEditScene';
import CustInfoEdit from './js/CustInfoEdit';
import CostMasterScene from './js/CostMasterScene';
import PayScene from './js/PayScene';
import BluetoothScene from './js/system/BluetoothScene';
import PrepayScene from './js/PrepayScene';
import WxPayScene from './js/WxPayScene';
import ArrearsDetailScene from './js/statistics/ArrearsDetailScene';
import CostHisScene from './js/pay/CostHisScene';

//Tab
const Tab = createBottomTabNavigator()
const MainScreenNavigator = ()=>(
    <Tab.Navigator>
        <Tab.Screen
            name={'MainScene'} component={MenuScene}
            options={{
                headerTitle:'您好，欢迎使用移动抄表终端',
                tabBarLabel:"首页",
                headerTintColor:'#fff',
                headerStyle:{
                    backgroundColor: 'rgba(0, 191 ,255, 0.5)',
                },
                headerTitleStyle:{fontWeight: 'bold',},
                headerLeft:null,
                tabBarIcon:({tintColor, focused}) => (
                    <Image
                        source={require('./img/icon_home_select.png')}
                        style={[{height: 24, width: 24}, {tintColor: tintColor}]}
                    />
                ),
            }}
        />
        <Tab.Screen
            name={'MineScene'} component={MineScene}
            options={{
                headerShown:false,
                headerTitle:'我的',
                tabBarLabel:"我的",
                tabBarIcon: ({tintColor, focused}) => (
                    <Image
                        source={require('./img/icon_my_select.png')}
                        style={[{height: 24, width: 24}, {tintColor: tintColor}]}/>
                ),
            }}
        />

    </Tab.Navigator>
)


//跳转路由设置
const App = ()=>{

    return (
        <NavigationContainer>
            <Stack.Navigator
                initialRouteName={'LoginScene'}
                screenOptions={({navigation,route})=>({
                    headerStyle:{elevation: 0,shadowOpacity: 0,height:48,backgroundColor:Colors.titleBar},
                    headerTransparent:false,
                    headerTintColor:'#fff',
                    headerTitleAlign:'center',
                    headerTitleStyle:{fontWeight: 'bold', fontSize: 18},
                    headerShown:true,
                    headerLeft: (props)=>{
                        return props.canGoBack && (
                            <HeaderBackButton
                                onPress={() => navigation.goBack()}
                                {...props}
                                backImage={({tintColor}) => {
                                    return <BackImage/>
                            }} />)
                    } ,
                })}
            >
                <Stack.Screen name={"IndexScreen"} component={MainScreenNavigator} options={{headerShown:false}}/>
                <Stack.Screen name={"MeterBooksSideMenu"} component={MeterBooksSideMenu}/>
                <Stack.Screen name={"LoginScene"} component={LoginView} options={{headerShown:false}} />
                <Stack.Screen name={"MeterBooksScene"} component={MeterBooksScene}  />
                <Stack.Screen name={"Entry"} component={Entry} />
                <Stack.Screen name={"CustInfoScene"} component={CustInfoScene} />
                <Stack.Screen name={"CustInfoEditScene"} component={CustInfoEditScene} />
                <Stack.Screen name={"CustInfoEdit"} component={CustInfoEdit} />
                <Stack.Screen name={"CustInfoOrder"} component={CustInfoOrder} />
                <Stack.Screen name={"CustInfoOrderScene"} component={CustInfoOrderScene} />
                <Stack.Screen name={"CostHisScene"} component={CostHisScene} />
                <Stack.Screen name={"CostMasterScene"} component={CostMasterScene} />
                <Stack.Screen name={"StatisticsScene"} component={StatisticsScene} />
                <Stack.Screen name={"PayScene"} component={PayScene} />
                <Stack.Screen name={"PrepayScene"} component={PrepayScene} />
                <Stack.Screen name={"WxPayScene"} component={WxPayScene} />
                <Stack.Screen name={"ArrearsDetailScene"} component={ArrearsDetailScene} />
                <Stack.Screen name={"BluetoothScene"} component={BluetoothScene} />
                <Stack.Screen name={"NoReadScene"} component={NoReadScene} options={{title:'未抄表统计'}} />
                <Stack.Screen name={"HasReadScene"} component={HasReadScene} options={{title:'已抄表统计'}} />
                <Stack.Screen name={"PaidScene"} component={PaidScene} options={{title:'已缴费统计'}} />
                <Stack.Screen name={"ArrearsScene"} component={ArrearsScene} options={{title:'欠费统计'}} />
                <Stack.Screen name={"SysConfig"} component={SysConfig} options={{title:'系统设置'}} />

            </Stack.Navigator>
        </NavigationContainer>
    )
}
export default App



